<template>
    <div>
      <!--  搜索区    -->
      <div>
        <div style="display: flex;justify-content: space-between;margin-bottom: 20px">
          <div>
            <el-input style="width: 300px;margin-right: 10px"
                      prefix-icon="el-icon-search"
                      v-model="empName"
                      @keydown.enter.native="initPerTrain"
                      clearable
                      @clear="initPerTrain"
                      placeholder="请输入员工名进行搜索..."></el-input>
            <el-button type="primary" icon="el-icon-search" @click="initPerTrain">搜索
            </el-button>
          </div>
          <el-button type="primary" icon="el-icon-plus" @click="addPerTrainView">添加</el-button>
        </div>
      </div>
      <!--   表格显示区   -->
      <div>
        <el-table
            :data="perTrains"
            border
            size="mini"
            stripe>
          <el-table-column
              type="selection"
              align="left"
              width="55">
          </el-table-column>
          <el-table-column
              prop="id"
              label="ID"
              align="left"
              fixed
              width="120">
          </el-table-column>
          <el-table-column
              prop="employee.name"
              label="员工姓名"
              align="left"
              width="120">
          </el-table-column>
          <el-table-column
              prop="trainContent"
              show-overflow-tooltip
              label="培训内容"
              align="left"
              width="200">
          </el-table-column>
          <el-table-column
              prop="remark"
              label="备注"
              align="left"
              width="120">
          </el-table-column>
          <el-table-column
              prop="trainDate"
              label="培训日期"
              align="left"
              width="120">
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="showEditPerTrainView(scope.row)">编辑</el-button>
              <el-button type="danger" @click="deletePerTrainView(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--  分页栏      -->
        <div style="display: flex;justify-content: flex-end">
          <el-pagination
              background
              @current-change="currentChange"
              @size-change="sizeChange"
              layout="sizes,prev, pager, next, jumper, ->, total"
              :total="total">
          </el-pagination>
        </div>
      </div>
      <!--   编辑和新增弹框   -->
      <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogVisible"
          width="30%">
        <div style="display: flex;justify-content: space-around;align-items: center">
          <el-form ref="ptForm" :model="pt" :rules="rules">
            <el-form-item label="编  号" label-width="120px">
              <el-input disabled v-model="pt.id"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工姓名" label-width="120px" prop="eid">
              <el-autocomplete
                  v-model="state"
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入内容"
                  @select="handleSelect"
              ></el-autocomplete>
            </el-form-item>
            <el-form-item   label="调动日期" label-width="120px" prop="trainDate">
              <el-col>
                <el-date-picker type="date" placeholder="选择日期" v-model="pt.trainDate" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item  label="培训内容" label-width="120px">
              <el-input type="textarea" v-model=pt.trainContent></el-input>
            </el-form-item>
            <el-form-item  label="备注" label-width="120px">
              <el-input type="textarea" v-model="pt.remark"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="doAddEmpPerTrain">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "PerTrain",
        mounted() {
          this.initPerTrain();
          this.loadAll();  //加载全部的员工id与姓名
        },
      data(){
          return {
            perTrains:[],
            empName: '', //搜索的员工姓名
            currentPage: 1,
            size: 10,
            total: 0,
            //编辑和新增弹框
            dialogTitle:'', //弹框标题
            dialogVisible: false,  //是否显示
            //用于表单
            pt:{
              id: null,
              eid: null,
              trainDate: '',
              trainContent: '',
              remark: ''
            },
            rules: {
              eid: [{required: true, message: '请输入员工姓名', trigger: 'blur'}],
              trainDate: [{required: true, message: '请输入入职日期', trigger: 'blur'}],
            },
            restaurants: [], //存储动态的员工姓名
            state:''  //动态加载的员工id与姓名

          }
        },
      methods:{
          //初始化员工培训信息
          initPerTrain(){
            this.getRequest('/personnel/train/?currentPage=' + this.currentPage + '&size=' + this.size + '&ename='+this.empName).then(resp =>{
              if(resp){
                this.perTrains = resp.data;
                console.log(this.perTrains)
                this.total = resp.total;
              }
            })
          },
        //进入编辑页面
        showEditPerTrainView(data){
          this.dialogTitle = '编辑员工培训信息',
              this.pt = data,
              this.dialogVisible = true,  //显示编辑窗口
              this.state = data.employee.name  //员工姓名回显
        },
        //显示添加页面
        addPerTrainView(){
          this.dialogTitle = '添加员工培训信息',
           this.dialogVisible = true  //显示编辑窗口
        },
        //删除
        deletePerTrainView(data){
            this.$confirm('此操作将永久删除 ' +'【ID:'+ data.id +' | 姓名：'+data.employee.name + '】的培训记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/personnel/train/'+data.id).then(resp => {
                    if (resp) {
                        this.initPerTrain();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //currentPage 改变时会触发
        currentChange(currentPage) {
          this.currentPage = currentPage;
          this.initPerTrain();
        },
        //pageSize 改变时会触发
        sizeChange(size) {
          this.size = size;
          this.initPerTrain();
        },
        //加载全部的员工id与姓名
        loadAll(){
          this.getRequest('/employee/basic/getAllName').then(resp => {
            if(resp){
              resp.obj.forEach((item,index) => {
                this.restaurants.push({"value": item.name,"eid": item.id})
              })
            }
          })
        },
        querySearchAsync(queryString, cb) {
          var restaurants = this.restaurants;
          var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
          clearTimeout(this.timeout);
          // 定一个定时器，有结果之前展示loading
          this.timeout = setTimeout(() => {
            // 调用组件自定方法展示搜索结果
            cb(results);
          }, 3000 * Math.random());
        },
        createStateFilter(queryString) {
          return (state) => {
            // eid,value
            return (state.value.indexOf(queryString) === 0);
          };
        },
        handleSelect(item) {
          // item是点击选中的一项
          console.log(item);
          this.pt.eid = item.eid
        },
        /*加载全部的员工id与姓名结束*/

        //弹框中确认按钮
        doAddEmpPerTrain(){
          if(this.pt.id){ //通过是否有id进行新增或修改
            this.$refs['ptForm'].validate(valid => {
              if (valid) {
                console.log(this.pt)
                this.putRequest('/personnel/train/', this.pt).then(resp => {
                  if (resp) {
                    this.dialogVisible = false;
                    this.initPerTrain();
                  }
                })
              }
            })
          } else {
            this.$refs['ptForm'].validate(valid => {
              if (valid) {
                console.log(this.pt)
                this.postRequest('/personnel/train/', this.pt).then(resp => {
                  if (resp) {
                    this.dialogVisible = false;
                    this.initPerTrain();
                  }
                })
              }
            })
          }
        }
      }
    }
</script>

<style scoped>

</style>